<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="plugins/jquery/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script
	src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<style type="text/css">
.site-form {
	margin-top: 150px;
}

#button {
	margin-left: 90px;
}
</style>
</head>
<body>

	<div class="row" id="app" style="margin-top: 100px;">
		<div class="col-sm-3"></div>
		<div class="col-sm-6" id="app">
			<div class="form-group">
				<select v-model="selected" style="height: 40px; width: 400px;">
					<option disabled value="">请选择密保问题</option>
					<option id="question1"></option>
					<option id="question2"></option>
					<option id="question3"></option>
				</select><br/>
				问题:<span id="selected">{{selected}}</span>
				<p></p>
				<label>请输入答案</label> <input type="text"
					class="form-control" v-model="answer" style="height: 40px; width: 400px;">
			</div>
			<p><button @click="submit()" class="btn btn-primary" id="button" style="margin-left: 25%;">找回密码</button></p>
			<label id="ties" style="color: red;"></label>


		</div>
		<div class="col-sm-3"></div>
	</div>

	<script type="text/javascript">
	new Vue({
		el:"#app",
		data: {
			   selected:'',
			   answer:''
			 },
			//页面加载完后触发
			mounted(){
				axios.get("user/findsecutity").then(res => {
					var options=res.data;
					for(var i =1;i<=options.length;i++){
						option=options[i-1];
						document.getElementById("question"+i).innerHTML=option.question;
						
					
				}
				})
			},
			methods:{
			submit:function(){
				var answer = this.answer;
				var question = document.getElementById("selected").innerText;
				console.info(question);
					axios.get("user/secutity?question="+question+"&answer="+answer).then(res => {
						console.info(res);
						if(res.data.status=="success"){
							document.getElementById("ties").innerHTML="您的密码为："+res.data.data;
						
						}else{
							document.getElementById("ties").innerHTML="您的密保答案错误，请重新输入";
							

							setTimeout(function (){
							 
								window.location.reload();
							}, 3000);
						}
						
					})
			}
		
			
		}
	});
	</script>
</body>
</html>
